<template>
  <div class="ymHeader">
    <div class="w1200">
      <span class="header-left">
        <font color="#FF0000" v-if="user != null">
          <span v-if="user.contentUser != null"><i class="hi">Hi,</i><i class="name">{{user.contentUser}}</i></span>
          <span v-if="user.contentEmail != null"><i class="hi">Hi,</i><i class="name">{{user.contentUser}}</i></span>
          <span v-if="user.contentMobile != null"><i class="hi">Hi,</i><i class="name">{{user.contentMobile}}</i></span>
        </font>欢迎您来鹰目
        <span v-if="!flag">
          <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymRegister'}" to="/ymRegister" class="register">请登录</router-link>
          <span class="login">
            <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>
          </span>
        </span>
        <span v-else @click="confirmExit" style="margin-right: 115px;">[退出]</span>
        <span class="merchant">商家管理中心</span>
      </span>
      <span class="member" @click="shos=1">
        会员中心
        <img src="../assets/ym-header/arrows.png" />
      </span>
      <ul class="suspend" v-show="shos==1" @mouseleave="shos=0">
        <router-link tag="li" to="/ymMemberdefault">首页</router-link>
        <router-link tag="li" to="/ymMembershop">店铺管理</router-link>
        <router-link tag="li" to="/ymMemberorder">订单中心</router-link>
        <router-link tag="li" to="/ymMemberaccount">账户管理</router-link>
        <router-link tag="li" to="/ymMemberneedlist">需求中心</router-link>
        <router-link tag="li" to="/ymAttentionmedia">关注中心</router-link>
        <router-link tag="li" to="/ymMembererror">我的检错</router-link>
      </ul>
      <span class="mean" @click="shos=2">
        我的收藏
        <img src="../assets/ym-header/arrows.png" />
      </span>
      <ul class="suspend shos2" v-show="shos==2" @mouseleave="shos=0">
        <router-link tag="li" to="/ymAttentionmedia">关注的媒体</router-link>
        <router-link tag="li" to="/ymAttentionstore">关注的店铺</router-link>
        <router-link tag="li" to="/ymAttentionactivity">关注的活动</router-link>
      </ul>
      <span class="serve" @click="shos=3">客户服务
        <img src="../assets/ym-header/arrows.png" />
      </span>
      <ul class="suspend shos3" v-show="shos==3" @mouseleave="shos=0">
        <li><a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODA0MTM3Ml80ODI2NjlfNDAwNjUwNzg5M18yXw">在线QQ</a></li>
      </ul>
      <span class="tel">客服热线</span>
      <span class="num">
      <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      flag: false,
      shos: 0
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser: function() {
      var user = localStorage.getItem("user");
      if (user) {
        this.user = JSON.parse(user);
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    confirmExit: function() {
      this.$confirm("确认退出登录吗？", "确认退出", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        localStorage.removeItem("user");
        this.user = null;
        this.flag = false;
        window.location.reload();
      })
    }
  }
}
</script>

<style scoped lang="less">
.ymHeader {
  background-color: #e6e6e6;
  .w1200 {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    position: relative;
    .header-left {
      width: 592px;
      display: inline-block;
      span {
        .hi {
          float: left;
        }
        .name {
          width: 80px;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          margin-right: 10px;
        }
      }
      .register {
        margin-left: 105px;
      }

      .login {
        color: #f29600;
        margin-left: 43px;
      }

      .merchant {
        margin-right: 135px;
        padding: 0 5px 1px 5px;
        width: 99px;
        height: 22px;
        background-color: #f29600;
        color: white;
      }
    }
    .tel {
      margin-left: 93px;
      margin-right: 7px;
    }
    .tel_img {
      padding-left: 5px;
      padding-right: 5px;
    }
    .num {
      font-weight: bold;
      color: #f29600;
    }
    .suspend {
      width: 80px;
      position: absolute;
      left: 590px;
      background-color: #e6e6e6;
      padding-left: 10px;
      z-index: 999;
      li {
        line-height: 25px;
        &:hover {
          color: #f29600;
        }
        a:hover {
          color: #f29600;
          text-decoration: none;
        }
      }
    }
    .shos2 {
      left: 690px;
    }
    .shos3 {
      left: 790px;
    }
  }
}

.member img,
.mean img,
.serve img {
  padding-left: 5px;
}

.member,
.mean,
.serve {
  margin-right: 20px;
  display: inline-block;
  line-height: 45px;
}
</style>
